Skip to content

Conversation

@portikM
Copy link
Member

@portikM portikM commented Oct 27, 2025

Summary

Addresses: https://konghq.atlassian.net/browse/TDX-6738

Fix CollapsibleSection chevron icon bug when clicking on dropdown in CollapsibleSection title, it toggles the chevron icon (recordings).

Before
https://github.com/user-attachments/assets/f63c54ba-b4d7-4b87-bfad-6879f368007d

After
https://github.com/user-attachments/assets/3212c9a1-6b61-42a7-875f-0d99ccc5dc1d

Other misc refactors:

  • CollapsibleSection.vue chevron icon size (use token variable instead of hardcoded)
  • useTemplateRef in bunch of places
  • useEventListener instead of addEventListener where appropriate

Copy link
Contributor

@vaibhavrajsingh2001 vaibhavrajsingh2001 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some lint errors:

Image

const expanded = ref<boolean>(true)
const toggleState = (e: Event) => {
if (!(e.target as HTMLElement).dataset.selectDropdownTrigger) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add a comment here on why we need to do this

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done

Comment on lines 193 to 196
useEventListener(popoverTrigger.value, 'mouseenter', showPopover)
useEventListener(popoverTrigger.value, 'focus', showPopover)
useEventListener(popoverTrigger.value, 'mouseleave', hidePopover)
useEventListener(popoverTrigger.value, 'blur', hidePopover)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can pass multiple events as an array to useEventListener, like this useEventListener(popoverTrigger.value, ['mouseenter', 'focus'], showPopover).

Can you try it out and verify?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yup you're right, updated this block

portikM and others added 3 commits October 31, 2025 12:06
@portikM
Copy link
Member Author

portikM commented Oct 31, 2025

Some lint errors:

Image

Fixed.

@portikM portikM enabled auto-merge (squash) October 31, 2025 16:34
@adamdehaven adamdehaven disabled auto-merge October 31, 2025 17:40
@adamdehaven adamdehaven merged commit 0c3875d into main Oct 31, 2025
8 checks passed
@adamdehaven adamdehaven deleted the fix/tdx-6738-collapsible-section-chevron-bug branch October 31, 2025 17:40
kongponents-bot pushed a commit that referenced this pull request Oct 31, 2025
## [1.101.2](v1.101.1...v1.101.2) (2025-10-31)

### Bug Fixes

* collapsible section chevron bug, misc refactors [TDX-6738] ([#738](#738)) ([0c3875d](0c3875d))
@kongponents-bot
Copy link
Collaborator

🎉 This PR is included in version 1.101.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants